// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2; // 8
@padding-sm: @padding-base * 3; // 12
@padding-md: @padding-base * 4; // 16
@padding-lg: @padding-base * 6; // 24
@padding-xl: @padding-base * 8; // 32

// FontFamily
@base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
@rich-font-family: 'Chinese Quote', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji';
@code-font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@price-font-family: avenir-heavy, "PingFang SC", helvetica neue, arial, sans-serif;

// FontSize
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-size-xl: 18px;

// LineHeight
@line-height-xs: 18px;
@line-height-sm: 20px;
@line-height-md: 22px;
@line-height-lg: 24px;
@line-height-xl: 26px;

// BorderRadius
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;

// 中性色
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;

// 混合：hairline（添加 Retina 屏幕下的 1px 边框），基于伪类 transform 实现。
.hairline-common() {
    content: '';
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}
.hairline-top(@color: @gray-3, @left: 0, @right: 0) {
    &::after {
        .hairline-common();
        top: 0;
        left: @left;
        right: @right;
        border-top: 1px solid @color;
        transform-origin: 50% 0;
        transform: scaleY(0.5);
    }
}
.hairline-bottom(@color: @gray-3, @left: 0, @right: 0) {
    &::after {
        .hairline-common();
        left: @left;
        right: @right;
        bottom: 0;
        border-bottom: 1px solid @color;
        transform-origin: 50% 100%;
        transform: scaleY(0.5);
    }
}
.hairline-left(@color: @gray-3, @top: 0, @bottom: 0) {
    &::after {
        .hairline-common();
        top: @top;
        left: 0;
        bottom: @bottom;
        border-left: 1px solid @color;
        transform-origin: 0 50%;
        transform: scaleX(0.5);
    }
}
.hairline-right(@color: @gray-3, @top: 0, @bottom: 0) {
    &::after {
        .hairline-common();
        top: @top;
        right: 0;
        bottom: @bottom;
        border-right: 1px solid @color;
        transform-origin: 100% 50%;
        transform: scaleX(0.5);
    }
}
.hairline-surround(@color: @gray-3, @radius: 0) {
    & {
        border-radius: @radius;
    }
    &::after {
        .hairline-common();
        top: -50%;
        left: -50%;
        right: -50%;
        bottom: -50%;
        border: 1px solid @color;
        border-radius: @radius * 2;
        transform-origin: 50% 50%;
        transform: scale(0.5);
    }
}
